import React, {lazy} from 'react';
import {Form, Input, Row} from "antd";

import {
    // 查询btn
    ButtonQuery,
    // 新增
    ButtonAdd,
    // 导出
    ButtonExport,
} from "./forms"


const componentsMap = {
    // 公司名称
    companies: lazy(() => import('./forms').then(m => ({default: m.SelectCompanies}))),
    // 模糊查询
    fuzzy: lazy(() => import('./forms').then(m => ({default: m.InputFuzzy}))),
    // 文本输入框
    text: lazy(() => import('./forms').then(m => ({default: m.InputText}))),
    period: lazy(() => import('./forms').then(m => ({default: m.periodRadio}))),
    // 跟进状态下拉框
    followState: lazy(() => import('./forms').then(m => ({default: m.SelectFollowState}))),
    project: lazy(() => import('./forms').then(m => ({default: m.SelectProjects}))),
    // 日期开始
    // startDate: "",
    // 日期结束
    // endDate: "",
    // 日期选择器
    // datePicker: lazy(() => import('./forms').then(m => ({default: m.MyDatePicker}))),
    // 合并时间段
    dateRange: lazy(() => import('./forms').then(m => ({default: m.DatePickerRange}))),
    // 选择日期
    chooseDateRange: lazy(() => import('./forms').then(m => ({default: m.ChooseDatePickerRange}))),
    // 平台
    platform: lazy(() => import('./forms').then(m => ({default: m.SelectPlatform}))),
    // 拍摄项目
    // shootProjects: lazy(() => import('./forms').then(m => ({default: m.SelectShootProjects}))),
    // 拍摄状态
    shootStates: lazy(() => import('./forms').then(m => ({default: m.SelectShootStates}))),
    // 人员列表
    person: lazy(() => import('./forms').then(m => ({default: m.SelectPerson}))),
    // 客服/销售-wx
    serviceWx: lazy(() => import('./forms').then(m => ({default: m.SelectPersonWx}))),
    // 微信客服
    serviceWx2: lazy(() => import('./forms').then(m => ({default: m.SelectPersonWx2}))),
    personZw: lazy(() => import('./forms').then(m => ({default: m.SelectPersonZw}))),
    // 客服-dy
    serviceDy: lazy(() => import('./forms').then(m => ({default: m.SelectPersonDy}))),
    // 创建者
    creator: lazy(() => import('./forms').then(m => ({default: m.SelectCreator}))),
    // 联系来源
    channel: lazy(() => import('./forms').then(m => ({default: m.SelectChannel}))),
    // 是否核对
    check: lazy(() => import('./forms').then(m => ({default: m.SelectCheck}))),
    // 职务
    positions: lazy(() => import('./forms').then(m => ({default: m.SelectPositions}))),
    // 账号
    accounts: lazy(() => import('./forms').then(m => ({default: m.SelectAccount}))),
    jhAccounts: lazy(() => import('./forms').then(m => ({default: m.SelectJhAccount}))),
    // 是否有效
    stateFlag: lazy(() => import('./forms').then(m => ({default: m.SelectState}))),
    stateFlag2: lazy(() => import('./forms').then(m => ({default: m.SelectState2}))),
    // 职位
    zwSelect: lazy(() => import('./forms').then(m => ({default: m.ZwSelect}))),
    // 计划下拉框
    jhSelect: lazy(() => import('./forms').then(m => ({default: m.JhSelect}))),
}

// 动态渲染组件的函数
const DynamicComponent = ({name, ...props}) => {
    const Component = componentsMap[name];

    // 处理未找到组件的情况
    if (!Component) {
        return <div>未找到名为 "{name}" 的组件</div>;
    }

    return <Component key={props.keyword || name} {...props} />;
};

class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            // 用于触发子组件的更新
            updateFlag: false
        }
        // 表单数据
        this.dataForm = {};
        // 表单label值，主要针对select的option值
        this.dataFormLabel = {};
    }

    queryCb = null;
    // 初始化标识，主要用于日期范围选择器
    dataFlag = false;
    dateRange = {
        start: 0,
        end: 0
    }


    itemInitCb = () => {
        this.dataFlag = true;
        if (this.queryCb) this.queryCb();
    }

    // 初始化数据后,暴露出去
    dataInit(callback) {
        const {formItemList} = this.props;
        let flag = false;
        formItemList.forEach(item => {
            if (item === "dateRange" || item.name === "dateRange" ||
                item === "chooseDateRange" || item.name === "chooseDateRange"
            ) flag = true;
        })
        if (!flag) {
            // 没需要初始数据的
            callback();
        } else {
            if (this.dataFlag) {
                callback();
            } else {
                this.queryCb = callback;
            }
        }
    }

    // mounted
    componentDidMount() {
    }

    // finish
    onFinish = () => {
        this.props.queryDataList();
    }

    // 获取日期范围，用于export时提示语
    getDateRange = () => {
        return this.dateRange;
    }

    saveDateRange = ({start, end}) => {
        this.dateRange = {start, end};
    }

    // 子组件change触发form的方法
    onFormChange = (data, e) => {
        this.setState({
            updateFlag: !this.state.updateFlag
        })
        this.dataForm = {
            ...this.dataForm,
            ...data
        }
        const key = Object.keys(data)[0];
        const label = e ? e.children : null;
        this.dataFormLabel = {
            [key]: label
        }
    }

    render() {
        const {updateFlag} = this.state
        const {formItemList, buttons, btnOther, queryDataList, sumRow} = this.props;
        return (
            <div>
                <Form onFinish={this.onFinish} autoComplete="off" ref={form => this.formData = form}>
                    <Input.Group className="input-group">
                        <Row gutter={[15, 10]}>
                            {formItemList.map(item => {
                                if (typeof item === "string") {
                                    //    return <DynamicComponent key={name} name={name}/>
                                    return DynamicComponent({
                                        name: item,
                                        onFormChange: this.onFormChange,
                                        itemInitCb: this.itemInitCb,
                                        saveDateRange: this.saveDateRange,
                                        dataForm: this.dataForm,
                                        updateFlag: updateFlag,
                                    })
                                } else {
                                    return DynamicComponent({
                                        ...item,
                                        onFormChange: this.onFormChange,
                                        itemInitCb: this.itemInitCb,
                                        saveDateRange: this.saveDateRange,
                                        dataForm: this.dataForm,
                                        updateFlag: updateFlag,
                                    })
                                }
                            })}
                            {
                                buttons.includes("query") ?
                                    <ButtonQuery queryDataList={queryDataList}></ButtonQuery> : null
                            }
                            {
                                buttons.includes("add") ?
                                    <ButtonAdd setHandler={this.props.setHandler}></ButtonAdd> : null
                            }
                            {
                                buttons.includes("export") ?
                                    <ButtonExport filename={this.props.filename}
                                                  columns={this.props.columns}
                                                  getDateRange={this.getDateRange}
                                                  queryDataList={queryDataList}
                                                  sumRow={sumRow}
                                    /> : null
                            }
                            {
                                btnOther.map(Item => {
                                    return <Item self={this.props.page}></Item>
                                })
                            }
                        </Row>
                    </Input.Group>
                </Form>
            </div>
        )
    }
}

export default MyForm;